<template>
  <div class="wrapper">
    <div class="fBox">
        <div class="itemF headerF">
            <image src="bmlocal://assets/acw/logo.png" class="imgF"></image>
            <!-- <text class="app_name">添美爱车网</text> -->
        </div>
        <div class="itemF contentF">
          <image src="bmlocal://assets/acw/login_user_phoneicon.png" class="imgC"></image>
           <input type="number" class="mobileC" placeholder="请输入手机号" max-length="11" v-model="mobileNum"/>
        </div>
        <div class="itemF contentF">
          <image src="bmlocal://assets/acw/login_password_lockicon.png" class="imgC"></image>
          <input type="number" class="pwdC" placeholder="请输入验证码" v-model="code"/>
          <wxc-button :text="sendTxt" type="blue" :btn-style="btnStyle2" :text-style="textStyle2" :disabled="sendDisable" @wxcButtonClicked="sendValidateCode"></wxc-button>
        </div>
        <div class="itemF bottomF">
            <wxc-button text="立即登录" type="blue" :btn-style="btnStyle" @wxcButtonClicked="login"></wxc-button>
            <!-- <wxc-button text="绑定手机号" type="blue" :btn-style="btnStyle" @wxcButtonClicked="toBindMobile"></wxc-button> -->
        </div>
        <div class="itemF wxF" v-if="showwxLogin">
        <!-- <div class="itemF wxF"> -->
            <div class="threeD">
                <div class="lineD"></div>
                <text class="lineTxt">第三方登录</text>
                <div class="lineD"></div>
            </div>            
            <image src="bmlocal://assets/acw/login_wechat.png" class="imgWX" @click="wxLogin"></image>
            <!-- <image src="bmlocal://assets/acw/login_wechat.png" class="imgWX" @click="toMap"></image> -->
        </div>
        <div class="itemFNone" v-if="!showwxLogin">
           
        </div>
        <div class="itemFB protocol" @click="toProtocol">
            <text class="bTxt">登录即代表同意</text>
            <text class="bbTxt">《用户服务协议》</text>
            <text class="bTxt">、</text>
            <text class="bbTxt">《隐私政策》</text>
            <text class="bTxt">等。</text>
        </div>
    </div>
    <wxc-loading :show="isShowLoad" type="default"></wxc-loading>
    <wxc-part-loading :show="isShowLoad"></wxc-part-loading>
  </div>
</template>

<style scoped>

.iconfont {
    font-family: iconfont;
}

.wrapper {
    background-color: #F4F4F4;
    padding-bottom: 0;
    padding-top: 0;
    margin: 0;
    width: 750px;
}
.app_name{
    color: #1E90FF;
    font-size: 60px;
}

.fBox {
    flex: 1;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    width: 750px;
}

.threeD {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: 750px;
    height: 50px;
}

.lineD {
    width: 150px;
    height: 2px;
    background-color: #e1e1e1;
}

.lineTxt {
    padding-left: 15px;
    padding-right: 15px;
    color: #A5A5A5;
}

.bTxt {
   color: #A5A5A5;
   font-size: 22px;
}

.bbTxt {
    color: #1E90FF;
    font-size: 22px;
}

.itemF {
    width: 550px;
}
.itemFNone{
    height: 400px;
}
.itemFB {
    position: relative;
    width: 750px;
    bottom: 10px;
    /* background-color: #000; */
}

.protocol {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 50px;
    /* margin-bottom: 1px; */
}

.headerF {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 120px;
    margin-bottom: 60px;
}

.textH {
    color: #000;
    font-size: 38px;
    margin-bottom: 50px;
}

.contentF {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #e1e1e1;
    margin-top: 20px;
    padding-bottom: 15px;
}

.wxF {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    margin-top: 50px;
    padding-bottom: 15px;
}

.imgC {
  width: 30px;
  height: 40px;
}

.imgWX {
    width: 100px;
    height: 100px;
    margin-top: 50px;
    margin-bottom: 50px;
}

.mobileC {
  height: 50px;
  line-height: 50px;
  flex: 1;
  /* width: 400px; */
  margin-left: 20px;
  /* background-color: #53ba37; */
}

.pwdC {
  height: 50px;
  line-height: 50px;
  /* width: 300px; */
  flex: 1;
  margin-left: 20px;
  /* background-color: #375aba; */
}

.textM {
    color: #A5A5A5;
    font-size: 26px;
    margin-top: 20px;
}

.imgF {
    width:450px;
    height: 150px;
    border-radius:20px; 
  
}

.bottomF {
    width: 550px;
    margin-top: 100px;
}

</style>

<script>

import { WxcButton, WxcLoading, WxcPartLoading } from 'weex-ui'

var bmWXShare = weex.requireModule('bmWXShare')
var bmPush = weex.requireModule('bmPush')
var wxamapnav = weex.requireModule('wxamapnav')

export default {
    components: {
        WxcButton,
        WxcLoading, 
        WxcPartLoading
    },
    data: () => ({
      btnStyle: {
        width: '550px'
      },
      btnStyle2: {
        width: '230px',
        height: '70px',
        lineHeight: '60px'
      },
      textStyle2: {
        fontSize: '28px'
      },
      mobileNum: '',
      code: '',
      sendDisable: false,
      sendTxt: '发送验证码',
      count: 60,
      isShowLoad: false,
      curHomeBackTriggerTimes: 1,
      maxHomeBackTriggerTimes: 2,
      showwxLogin: true,
    }),
    created() {
        // if(weex.config.env.osName =='android'){
        //     this.androidFinishApp(); 
        // }
        var result = this.$storage.getSync('LoginStatus');
        if(result == 'true'){
            this.$router.open({
                name: 'acw.indexnew',
                type: 'PUSH',
                canBack: false,
            })
        }
        this.wxInit();
    },
    mounted () {
        // setTimeout(() => {
        //     this.getuiID();
        // }, 2000)
    },
    methods: {
        showTime(obj){
            if (obj.count == 0) {
                // do job
                obj.sendTxt = "发送验证码";
                obj.count = 60;
                obj.sendDisable = false;
                return;
            } else {              
                obj.sendDisable = true;
                obj.sendTxt = "重新发送（" + obj.count + "S）"
                obj.count -= 1;
                setTimeout(function () {
                    obj.showTime(obj);
                }, 1000);
            }
        },
        toProtocol() {
            this.$router.open({
                name: 'acw.home.protocol',
                type: 'PUSH'
            })
        },
        toMap() {
            wxamapnav.navtols(39.904556, 116.427231)
        },
        toBindMobile() {
            this.$router.open({
                name: 'acw.home.bindMobile',
                type: 'PUSH'
            })
        },
        sendValidateCode(e){
            console.log(":::::::::::::::::::::-- " + e.disabled);
            if(e.disabled) {
                return;
            }
            if(!this.mobileNum) {
                this.$notice.toast({ message: "请输入手机号"})
                return;
            }

            console.log(":::::::::::::::::::::-- " + this.count);
            // console.log(e.disabled);
            var vm = this;
            
            vm.$fetch({
                method: 'POST',    // 大写
                name: 'login.getMes', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: {
                    mobile: this.mobileNum
                }
            }).then(resData => {
                // 成功回调
                console.log(resData)
                if(resData && resData.errno == 0) {
                    this.sendDisable = true;
                    this.showTime(vm);
                    vm.$notice.toast({ message: "发送成功"})
                } else {
                    vm.$notice.toast({ message: resData.errmsg});
                }
                
            }, error => {
                // 错误回调
                console.log(error)
                vm.$notice.toast({ message: "发送失败"})
            })
        },
        login () {
            //如果 selltype 为 0，则为平台（后台）； 如果 为 1，则为 个人； 如果为 2，则为 商家，
            if(!this.mobileNum) {
                this.$notice.toast({ message: "请输入手机号"})
                return;
            } else if (!this.code) {
                this.$notice.toast({ message: "请输入验证码"})
                return;
            }
            // this.$notice.loading.show();
            const vm = this
            
            this.isShowLoad = true;
            // var cId = this.$storage.getSync('ClientId')
            this.$fetch({
                method: 'POST',    // 大写
                name: 'login.login', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: {
                    mobile: this.mobileNum,
                    code: this.code,
                    // clientId: cId
                }
            }).then(resData => {
                // 成功回调
                this.isShowLoad = false;
                console.log(resData)
                if(resData && resData.errno == 0){
                    this.$storage.setSync('UserInfo', {
                        token: resData.data.token,
                        id: resData.data.workerInfo.id,
                        nickName: resData.data.workerInfo.nickName,
                        mobile: resData.data.workerInfo.mobile,
                        verified: resData.data.workerInfo.verified,
                        deposit: resData.data.workerInfo.deposit,
                        depositPaid: resData.data.workerInfo.depositPaid,
                        integral: resData.data.workerInfo.integral,
                        isTopup: resData.data.workerInfo.isTopup
                    })
                    vm.$storage.setSync('LoginStatus', 'true')
                    vm.$router.open({
                        name: 'acw.indexnew',
                        type: 'PUSH',
                        canBack: false,
                    })
                } else {
                    this.$notice.toast({ message: resData.errmsg})
                }
                this.$notice.loading.hide();
            }, error => {
                // 错误回调
                this.isShowLoad = false;
                console.log(error)
                this.$notice.toast({ message: "登录失败, 请重试"})
            })
        },
        wxInit() {
            // 5cadf0fb0cafb25c0c00015c ios ||  5c655bf7b465f546ee00069e android
            if(weex.config.env.osName =='android'){
                bmWXShare.initUM('5c655bf7b465f546ee00069e')  
            } else {
                bmWXShare.initUM('5cadf0fb0cafb25c0c00015c')
            }
            bmWXShare.initWX({
                appKey: 'wxf4cc61d23f1c0461', // 微信开发平台申请的appkey
                appSecret: '155fabcaddd64ab33b83e6d7924b5a0e', // appKey对应的appSecret，
                redirectURL: '/js/pages/login/index.js' // 授权回调页面
            })
            var result = bmWXShare.isInstallWXApp()
            if(!result) {
                this.showwxLogin = false
            }
        },
        wxLogin() {
            this.isShowLoad = true;
            let vm = this;
            // vm.getuiID();
            // this.$notice.loading.show();
            bmWXShare.authLogin(function(resData){
                // 授权结果，成功的话会将所有的userInfo返回
                console.log("::::::::::::::::::::::::::::::::")
                if(resData && resData.status == 0) {
                    // var cId = vm.$storage.getSync('ClientId')
                    console.log("::::::::::::::sssssssssssss::::::::::::::::::")
                    vm.$storage.setSync('WxUserInfo', {
                        "accessToken": resData.data.accessToken,
                        "city": resData.data.city,
                        "country": resData.data.country,
                        "expiresIn": resData.data.expires_in,
                        "gender": resData.data.gender,
                        "iconUrl": resData.data.iconurl,
                        "name": resData.data.name,
                        "openid": resData.data.openid,
                        "profileImageUrl": resData.data.profile_image_url,
                        "province": resData.data.province,
                        "refreshToken": resData.data.refreshToken,
                        "uid": resData.data.uid,
                        "unionid": resData.data.unionid,
                        // "clientId": cId,
                    })
                    console.log('微信登录失败', resData)
                    vm.$fetch({
                        method: 'POST',    // 大写
                        name: 'login.wxInfo', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                        data: {
                            "accessToken": resData.data.accessToken,
                            "city": resData.data.city,
                            "country": resData.data.country,
                            "expiresIn": resData.data.expires_in,
                            "gender": resData.data.gender,
                            "iconUrl": resData.data.iconurl,
                            "name": resData.data.name,
                            "openid": resData.data.openid,
                            "profileImageUrl": resData.data.profile_image_url,
                            "province": resData.data.province,
                            "refreshToken": resData.data.refreshToken,
                            "uid": resData.data.uid,
                            "unionid": resData.data.unionid,
                            // "clientId": cId,
                        }
                    }).then(resData => {
                        // 成功回调
                        
                        vm.isShowLoad = false;
                        console.log(resData)
                        if(resData && resData.errno == 0){
                            vm.$notice.toast({ message: "微信登录成功"})
                            vm.$notice.loading.hide();
                            let mobile = resData.data.workerInfo.mobile;
                            vm.$storage.setSync('UserInfo', {
                                token: resData.data.token,
                                id: resData.data.workerInfo.id,
                                nickName: resData.data.workerInfo.nickName,
                                mobile: resData.data.workerInfo.mobile,
                                verified: resData.data.workerInfo.verified,
                                deposit: resData.data.workerInfo.deposit,
                                depositPaid: resData.data.workerInfo.depositPaid,
                                integral: resData.data.workerInfo.integral
                            })
                            if(mobile) {
                                console.log("::::::::::::::::::::有手机号::::::::::::::::::")
                                // 登录成功后切换到home页面
                                vm.$storage.setSync('LoginStatus', 'true')
                                vm.$router.open({
                                    name: 'acw.indexnew',
                                    type: 'PUSH',
                                    canBack: false,
                                })
                            } else {
                                console.log("::::::::::::::::::::没有手机号::::::::::::::::::")
                                vm.$router.open({
                                    name: 'acw.home.bindMobile',
                                    type: 'PUSH'
                                })
                            }
                        } else {
                            vm.$notice.toast({ message: resData.errmsg})
                        }
                    }, error => {
                        // 错误回调
                        vm.isShowLoad = false;
                        console.log('微信登录失败', error)
                        vm.$notice.toast({ message: "微信登录失败, 请重试"})
                    })
                } else if (resData.status == -1) {
                    vm.isShowLoad = false;
                    vm.$notice.toast({ message: "普通错误类型"})
                } else if (resData.status == -2) {
                    vm.isShowLoad = false;
                    vm.$notice.toast({ message: "您点击了取消或返回"})
                } else if (resData.status == -3) {
                    vm.isShowLoad = false;
                    vm.$notice.toast({ message: "发送失败"})
                } else if (resData.status == -4) {
                    vm.isShowLoad = false;
                    vm.$notice.toast({ message: "授权失败"})
                } else if (resData.status == -5) {
                    vm.isShowLoad = false;
                    vm.$notice.toast({ message: "微信不支持"})
                } else {
                    vm.isShowLoad = false;
                    vm.$notice.toast({ message: "登录失败，请重试"})
                }
            });
        },
        getuiID() {
            const vm = this;
            bmPush.getCid(result => {
                console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~", result)
                try{
                    if(result){
                        console.log("ClientId", result.data.cid)
                        vm.$storage.setSync('ClientId', result.data.cid)
                    }   
                } catch(error) {
                    console.log("~~~~~~~~~~~获取推送ID异常~~~~~~~~~~~~~~~~" + error);
                } 
                console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~")
            })
        },
        //安卓自定义退出APP
        // androidFinishApp() {
        //     const globalEvent = weex.requireModule("globalEvent");
        //     globalEvent.addEventListener("homeBack", options => {
        //         this.curHomeBackTriggerTimes === this.maxHomeBackTriggerTimes &&
        //         this.$router.finish();

        //         this.$notice.toast({
        //         message: `点击返回${
        //             this.maxHomeBackTriggerTimes
        //         }次之后，会关闭应用，当前点击第${this.curHomeBackTriggerTimes}次`
        //         });
        //         this.curHomeBackTriggerTimes++;
        //     });
        // },
    }
}
  
</script>
